<template>
  <view class="p-30">
    <view class="static flex-space-between">
      <view class="block" v-for="(item, index) in staticData" :key="item.text" :style="{ background: staticColorList[index] }">
        <view class="score">{{ item.num }}</view>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>

    <view class="info">
      <text class="title">成员信息</text>
      <text class="standard">
        {{ infoMsg }}
      </text>
    </view>

    <view v-for="(item, index) in listData" :key="index" class="content-box">
      <u-avatar src="" size="50"></u-avatar>
      <view class="ml-20">
        <view><text class="title">{{ item.name }}</text><text :class="`status ${item.resultColor}`">{{ item.result }}</text></view>
        <view class="dept">{{ item.deptName }}</view>
      </view>
      <text class="get">{{ item.get }}</text>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import {
  reqGetExaminationStatisticsDetail,
  reqGetTrainingPlanDetail
} from '@/api/educational-training/examination-statistics'
export default {
  name: 'examination-statistics-detail',

  components: {},

  props: {},

  onLoad({ id, mode }) {
    this.mode = mode
    this.id = id
  },

  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getlist()
  },
  data() {
    return {
      pageNum: 1,
      total: 0,
      id: '',
      mode: '',
      listData: [
        {
          name: '翠雨寒',
          deptName: '安全电仪部',
          status: '不及格',
          get: '得分:50分',
        }
      ]
    }
  },

  computed: {
    ...mapState({
      staticDetail: (state) => state.onlineExam.staticDetail
    }),
    isExam() {
      return this.mode === 'exam'
    },
    isTrain() {
      return this.mode === 'train'
    },
    infoMsg() {
      return this.isExam
          ? `本试卷满分${this.staticDetail.fullmark}分，合格${this.staticDetail.passmark}分`
          : `本次培训应学时长${this.staticDetail.planDurationLabel}`
    },
    staticColorList() {
      return ['#88B4C4', '#C4C088', '#88C49C', '#888EC4']
    },
    staticData() {
      return this.isExam ? [
        {
          num: this.staticDetail.totalCount || 0,
          text: '应考人数',
        },
        {
          num: this.staticDetail.actualCount || 0,
          text: '实考人数',
        },
        {
          num: this.staticDetail.passCount || 0,
          text: '合格人数',
        },
        {
          num: `${this.staticDetail.passRate * 100}%`,
          text: '合格率',
        }
      ] : [
        {
          num: this.staticDetail.planPersonCount || 0,
          text: '应培人数',
        },
        {
          num: this.staticDetail.actualPersonCount || 0,
          text: '实培人数',
        },
        {
          num: this.staticDetail.finishedPersonCount || 0,
          text: '完成人数',
        },
        {
          num: `${this.staticDetail.finishRate * 100}%`,
          text: '完成率',
        }
      ]
    },
  },

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {
    initData() {
      this.pageNum = 1
      this.total = null
      this.getlist()
    },
    getlist() {
      const examResultMap = { 1: 'blue',2: 'red',3: 'gray' }
      const formatExamRows = (rows) =>
          rows.map((item) => ({
            name: item.userName,
            deptName: item.deptName,
            result: item.examResultLabel,
            resultColor: examResultMap[item.examResult],
            get: `得分:${item.finalScore}分`,
          }))
      const trainResultMap = { '学习中': 'yellow','已完成': 'blue','未开始': 'gray' }
      const formatTrainRows = (rows) =>
          rows.map((item) => ({
            name: item.personName,
            deptName: item.deptName,
            result: item.planStatus,
            resultColor: trainResultMap[item.planStatus],
            get: `已学:${item.actualDurationLabel}`,
          }))
      const formatRows = this.isExam ? formatExamRows: formatTrainRows
      const handleRes = (res) => {
        if (this.pageNum === 1) {
          this.listData = formatRows(res.rows)
        } else {
          this.listData.push(...formatRows(res.rows))
        }
        this.total = res.total
        uni.stopPullDownRefresh()
      }
      if (!this.total || this.total > this.listData.length) {
        if (this.isExam) {
          reqGetExaminationStatisticsDetail({
            pageNum: this.pageNum,
            examPlanId: this.id
          }).then(handleRes)
        } else {
          reqGetTrainingPlanDetail({
            pageNum: this.pageNum,
            planId: this.id
          }).then(handleRes)
        }
      }
    },
  }
}
</script>

<style scoped lang="scss" type="text/scss">
$text_gray: #999999;
$gray: #BBBBBB;
$red: #A14430;
$yellow: #C4C088;
$blue: #88B4C4;
.gray {
  background: $gray;
}
.red {
  background: $red;
}
.yellow {
  background: $yellow;
}
.blue {
  background: $blue;
}

.static {
  .block {
    width: 158rpx;
    height: 140rpx;
    box-shadow: 0 5rpx 10rpx 1px rgba(188,188,188,0.16);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .score {
      font-size: 44rpx;
      font-weight: bold;
    }
    .text {
      margin-top: 5rpx;
      font-size: 28rpx;
    }
  }
}
.info {
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;

  .title {
    color: $text_gray;
  }

  .standard {
    color: $blue;
  }
}

.content-box {
  position: relative;
  margin-bottom: 20rpx;
  display: flex;
  height: 140rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding: 20rpx;

  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 0px;
  }
  .status {
    display: inline-block;
    margin-left: 10rpx;
    padding: 4rpx 8rpx;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: #fff;
  }
  .dept {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: $text_gray;
  }
  .get {
    position: absolute;
    right: 20rpx;
    top: 26rpx;
    color: $text_gray;
  }
}
</style>
